<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>学生信息</h1>

        <button @click="student.age++">年龄+1岁</button>
        <button @click="addSex">添加性别属性，默认值：男</button>
        <button @click="student.sex='女'">修改性别</button>
        <button @click="addFriends('张翠')">在列表首位添加一个朋友</button>
        <button @click="student.friends[0].name = '张三'">修改第一个朋友的名字为：张三</button>
        <button @click="addHobby">添加一个爱好</button>
        <button @click="editHobby">修改第一个爱好为：骑车</button>

        <h2>姓名：{{student.name}}</h2>
        <h2>年龄：{{student.age}}</h2>
        <h2 v-if="student.sex">性别：{{student.sex}}</h2>
        <h2>爱好：</h2>
        <ul>
            <li v-for="(val, index) of student.hobby" :key="index">{{val}}</li>
        </ul>
        <h2>朋友们：</h2>
        <ul>
            <li v-for="val of student.friends" :key="val.id">{{val.name}}--{{val.age}}</li>
        </ul>
    </div>


    <script>
        new Vue({
            el: '#root',
            data: {
                student: {
                    name: 'Zoe',
                    age: 18,
                    hobby: ['抽烟', '喝酒', '烫头'],
                    friends: [
                        {id: '001', name: '马冬梅', age: 25},
                        {id: '002', name: '马老二', age: 30},
                        {id: '003', name: '周杰伦', age: 27},
                        {id: '004', name: '林俊杰', age: 28}
                    ]
                }
            },
            methods: {
                addSex() {
                    Vue.set(this.student, 'sex', '男')
                    // this.$set(this.student, 'sex', '男')
                },
                addFriends(name) {
                    this.student.friends.unshift({id: `00${this.student.friends.length + 1}`, name, age: 25})
                },
                editFirstFriendName() {
                    this.student.friends[0].name = '张三'
                },
                addHobby() {
                    this.student.hobby.push('xuexi')
                },
                editHobby() {
                    // this.student.hobby.splice(0, 1, '骑车')
                    // Vue.set(this.student.hobby, 0, 'qiche')
                    this.$set(this.student.hobby, 0, 'qiche1')
                }
            }
        })
    </script>
</body>
</html>